<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Other Form Elements - Photon Admin Panel Theme</title>
                <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
        <link rel="shortcut icon" href="favicon.ico" />
        <link rel="apple-touch-icon" href="iosicon.png" />
<!--    DEVELOPMENT LESS -->
<!--    <link rel="stylesheet/less" href="css/photon.less" media="all" />
        <link rel="stylesheet/less" href="css/photon-responsive.less" media="all" />-->
<!--    PRODUCTION CSS -->
        <link rel="stylesheet" href="css/css_compiled/photon-min.css" media="all" />
        <link rel="stylesheet" href="css/css_compiled/photon-min-part2.css" media="all" />
        <link rel="stylesheet" href="css/css_compiled/photon-responsive-min.css" media="all" />

<!--[if IE]>
        <link rel="stylesheet" type="text/css" href="css/css_compiled/ie-only-min.css" />
<![endif]-->

<!--[if lt IE 9]>
        <link rel="stylesheet" type="text/css" href="css/css_compiled/ie8-only-min.css" />
        <script type="text/javascript" src="js/plugins/excanvas.js"></script>
        <script type="text/javascript" src="js/plugins/html5shiv.js"></script>
        <script type="text/javascript" src="js/plugins/respond.min.js"></script>
        <script type="text/javascript" src="js/plugins/fixFontIcons.js"></script>
<![endif]-->
        
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.pnotify.min.js"></script>

<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="js/plugins/less-1.3.1.min.js"></script>        
<script type="text/javascript" src="js/plugins/xbreadcrumbs.js"></script>
<script type="text/javascript" src="js/plugins/jquery.maskedinput-1.3.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.autotab-1.1b.js"></script>
<script type="text/javascript" src="js/plugins/charCount.js"></script>
<script type="text/javascript" src="js/plugins/jquery.textareaCounter.js"></script>
<script type="text/javascript" src="js/plugins/elrte.min.js"></script>
<script type="text/javascript" src="js/plugins/elrte.en.js"></script>
<script type="text/javascript" src="js/plugins/select2.js"></script>
<script type="text/javascript" src="js/plugins/jquery-picklist.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/plugins/additional-methods.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.form.js"></script>
<script type="text/javascript" src="js/plugins/jquery.metadata.js"></script>
<script type="text/javascript" src="js/plugins/jquery.mockjax.js"></script>
<script type="text/javascript" src="js/plugins/jquery.uniform.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.rating.pack.js"></script>
<script type="text/javascript" src="js/plugins/farbtastic.js"></script>
<script type="text/javascript" src="js/plugins/jquery.timeentry.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.jstree.js"></script>
<script type="text/javascript" src="js/plugins/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="js/plugins/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.mCustomScrollbar.js"></script>
<script type="text/javascript" src="js/plugins/jquery.flot.js"></script>
<script type="text/javascript" src="js/plugins/jquery.flot.stack.js"></script>
<script type="text/javascript" src="js/plugins/jquery.flot.pie.js"></script>
<script type="text/javascript" src="js/plugins/jquery.flot.resize.js"></script>
<script type="text/javascript" src="js/plugins/raphael.2.1.0.min.js"></script>
<script type="text/javascript" src="js/plugins/justgage.1.0.1.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.clock.js"></script>
<script type="text/javascript" src="js/plugins/jquery.countdown.js"></script>
<script type="text/javascript" src="js/plugins/jquery.jqtweet.js"></script>
<script type="text/javascript" src="js/plugins/jquery.cookie.js"></script>
<script type="text/javascript" src="js/plugins/bootstrap-fileupload.min.js"></script>
<script type="text/javascript" src="js/plugins/prettify/prettify.js"></script>

<script type="text/javascript" src="js/common.js"></script>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

    <body class="body-inner">
            
    <div class="btn-toolbar btn-mobile-menus">
        <button class="btn btn-main-menu"></button>
        <button class="btn btn-user-menu"><i class="icon-logo"></i></button>
    </div>

    <div class="nav-fixed-left" style="visibility: hidden">
        <ul class="nav nav-side-menu">
            <li class="shadow-layer"></li>
            <li>
                <a href="dashboard.php">
                    <i class="icon-photon home"></i>
                    <span class="nav-selection">Dashboard</span>
                                    </a>
            </li>
            <li>
                <a href="javascript:;" class="sub-nav-container">
                    <i class="icon-photon list_nested"></i>
                    <span class="nav-selection">Form Elements</span>
                    <i class="icon-menu-arrow"></i>                </a>
                <div class="sub-nav">
                    <ul class="nav">
                        <li>
                            <a href="form-elements-input-fields.php">Input Fields</a>
                        </li>
                        <li>
                            <a href="form-elements-masked-input-fields.php">Masked Input Fields</a>
                        </li>
                        <li>
                            <a href="form-elements-autotabs.php">Autotabs</a>
                        </li>
                        <li>
                            <a href="form-elements-text-areas.php">Text Areas</a>
                        </li>
                        <li>
                            <a href="form-elements-select-menus.php">Select Menus</a>
                        </li>
                        <li>
                            <a href="form-elements-other-form-elements.php">Other Form Elements</a>
                        </li>
                        <li>
                            <a href="form-elements-form-validation.php">Form Validation</a>
                        </li>
                        <li>
                            <a href="form-elements-ui-elements.php">UI Elements</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="javascript:;" class="sub-nav-container">
                    <i class="icon-photon chart_alt"></i>
                    <span class="nav-selection">Graphs and Statistics</span>
                    <i class="icon-menu-arrow"></i>                </a>
                <div class="sub-nav">
                    <ul class="nav">
                        <li>
                            <a href="graphs-and-statistics-graphs.php">Graphs</a>
                        </li>
                        <li>
                            <a href="graphs-and-statistics-statistical-elements.php">Statistical Elements</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="typography.php">
                    <i class="icon-photon book_alt2"></i>
                    <span class="nav-selection">Typography</span>
                                    </a>
            </li>
            <li>
                <a href="grid.php">
                    <i class="icon-photon hash"></i>
                    <span class="nav-selection">Grid</span>
                                    </a>
            </li>
            <li>
                <a href="tables.php">
                    <i class="icon-photon new_window"></i>
                    <span class="nav-selection">Tables</span>
                                    </a>
            </li>
            <li>
                <a href="maps.php">
                    <i class="icon-photon map_pin_stroke"></i>
                    <span class="nav-selection">Maps</span>
                                    </a>
            </li>
            <li>
                <a href="sidebar-widgets.php">
                    <i class="icon-photon book_alt"></i>
                    <span class="nav-selection">Sidebar Widgets</span>
                                    </a>
            </li>
            <li>
                <a href="javascript:;" class="sub-nav-container">
                    <i class="icon-photon bolt"></i>
                    <span class="nav-selection">Error Pages</span>
                    <i class="icon-menu-arrow"></i>                </a>
                <div class="sub-nav">
                    <ul class="nav">
                        <li>
                            <a href="error-pages-400-bad-request.php">400 Bad Request</a>
                        </li>
                        <li>
                            <a href="error-pages-401-unauthorized.php">401 Unauthorized</a>
                        </li>
                        <li>
                            <a href="error-pages-403-forbidden.php">403 Forbidden</a>
                        </li>
                        <li>
                            <a href="error-pages-404-page-not-found.php">404 Page Not Found</a>
                        </li>
                        <li>
                            <a href="error-pages-500-internal-server-error.php">500 Internal Server Error</a>
                        </li>
                        <li>
                            <a href="error-pages-503-service-unavailable.php">503 Service Unavailable</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="help.php">
                    <i class="icon-photon info"></i>
                    <span class="nav-selection">Help</span>
                                    </a>
            </li>
            <li class="nav-logout">
                <a href="/">
                    <i class="icon-photon key_stroke"></i><span class="nav-selection">Logout</span>
                </a>
            </li>
        </ul>
    </div>        <div class="nav-fixed-topright" style="visibility: hidden">
    <ul class="nav nav-user-menu">
        <li class="user-sub-menu-container">
            <a href="javascript:;">
                <i class="user-icon"></i><span class="nav-user-selection">Company Name</span><i class="icon-menu-arrow"></i>
            </a>
                        <ul class="nav user-sub-menu">
                                <li>
                    <a href="javascript:;">My Profile</a>
                </li>
                                <li>
                    <a href="javascript:;">Settings</a>
                </li>
                                <li>
                    <a href="javascript:;">Messages</a>
                </li>
                                <li>
                    <a href="javascript:;">Help</a>
                </li>
                            </ul>
                    </li>
        <li>
            <a href="javascript:;">
                <i class="icon-photon mail"></i>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <i class="icon-photon comment_alt2_stroke"></i>
                <div class="notification-count">12</div>
            </a>
        </li>
    </ul>
</div>

<script>
    $(function(){
        setTimeout(function(){
            $('.nav-fixed-topright').removeAttr('style');
        }, 300);
        
        $(window).scroll(function(){
            if($('.breadcrumb-container').length){
                var scrollState = $(window).scrollTop();
                if (scrollState > 0) $('.nav-fixed-topright').addClass('nav-released');
                else $('.nav-fixed-topright').removeClass('nav-released')
            }
        });
        
        $('.user-sub-menu-container').on('click', function(){
            $(this).toggleClass('active-user-menu');
        });
    });
</script>

        
<div class="panel">
    <div class="panel-content filler">
        <div class="panel-logo"></div>
        <div class="panel-header">
            <h1><small>Other Form Elements</small></h1>
        </div>
        <div class="panel-search container-fluid">
            <form class="form-horizontal" action="javascript:;" />
                <input id="panelSearch" placeholder="Search" type="text" name="panelSearch" />
                <button class="btn btn-search"></button>
                <script>
                    $().ready(function(){
                        var searchTags = [
                            "Dashboard",
                            "Form Elements",
                            "Graphs and Statistics",
                            "Typography",
                            "Grid",
                            "Tables",
                            "Maps",
                            "Sidebar Widgets",
                            "Error Pages",
                            "Help",
                            "Input Fields",
                            "Masked Input Fields",
                            "Autotabs",
                            "Text Areas",
                            "Select Menus",
                            "Other Form Elements",
                            "Form Validation",
                            "UI Elements",
                            "Graphs",
                            "Statistical Elements",
                            "400 Bad Request",
                            "401 Unauthorized",
                            "403 Forbidden",
                            "404 Page Not Found",
                            "500 Internal Server Error",
                            "503 Service Unavailable"
                        ];
                        $( "#panelSearch" ).autocomplete({
                            source: searchTags
                        });
                    });            
                </script>
            </form>
        </div>
                    <script type="text/javascript">
        $(function () {
            $("#jstree").jstree({ 
                "json_data" : {
                    "data" : [
                                                {
                            "data" : { 
                                "title" : "Checkboxes", 
                                "attr" : { "href" : "#Checkboxes" } 
                            }
                        },
                                                {
                            "data" : { 
                                "title" : "Radio Buttons", 
                                "attr" : { "href" : "#Radio_Buttons" } 
                            }
                        },
                                                {
                            "data" : { 
                                "title" : "Buttons", 
                                "attr" : { "href" : "#Buttons" } 
                            }
                        },
                                                {
                            "data" : { 
                                "title" : "Button Dropdown Menus", 
                                "attr" : { "href" : "#Button_Dropdown_Menus" } 
                            }
                        },
                                                {
                            "data" : { 
                                "title" : "Basic Button Groups", 
                                "attr" : { "href" : "#Basic_Button_Groups" } 
                            }
                        },
                                                {
                            "data" : { 
                                "title" : "Checkbox Button Groups", 
                                "attr" : { "href" : "#Checkbox_Button_Groups" } 
                            }
                        },
                                                {
                            "data" : { 
                                "title" : "Radio Button Groups", 
                                "attr" : { "href" : "#Radio_Button_Groups" } 
                            }
                        },
                                                {
                            "data" : { 
                                "title" : "Tags", 
                                "attr" : { "href" : "#Tags" } 
                            }
                        },
                                                {
                            "data" : { 
                                "title" : "Star Rating", 
                                "attr" : { "href" : "#Star_Rating" } 
                            }
                        },
                                                {
                            "data" : { 
                                "title" : "Spinners", 
                                "attr" : { "href" : "#Spinners" } 
                            }
                        },
                                                {
                            "data" : { 
                                "title" : "Color Picker", 
                                "attr" : { "href" : "#Color_Picker" } 
                            }
                        },
                                                {
                            "data" : { 
                                "title" : "Inline Date Picker", 
                                "attr" : { "href" : "#Inline_Date_Picker" } 
                            }
                        },
                                                {
                            "data" : { 
                                "title" : "Date Picker", 
                                "attr" : { "href" : "#Date_Picker" } 
                            }
                        },
                                                {
                            "data" : { 
                                "title" : "Multiple Months Date Picker", 
                                "attr" : { "href" : "#Multiple_Months_Date_Picker" } 
                            }
                        },
                                                {
                            "data" : { 
                                "title" : "Time Picker", 
                                "attr" : { "href" : "#Time_Picker" } 
                            }
                        },
                                            ]
                },
                "plugins" : [ "themes", "json_data", "ui" ]
            })
            .bind("click.jstree", function (event) {
                var node = $(event.target).closest("li");
                document.location.href = node.find('a').attr("href");
                return false;
            })
            .delegate("a", "click", function (event, data) { event.preventDefault(); });
        });
    </script>
        <div class="sidebarMenuHolder">
        <div class="JStree">
            <div class="Jstree_shadow_top"></div>
            <div id="jstree"></div>
            <div class="Jstree_shadow_bottom"></div>
        </div>
    </div>    </div>
    <div class="panel-slider">
        <div class="panel-slider-center">
            <div class="panel-slider-arrow"></div>
        </div>
    </div>
</div>
        <div class="main-content">
            <div class="breadcrumb-container">
    <ul class="xbreadcrumbs">
        <li>
            <a href="dashboard.php">
                <i class="icon-photon home"></i>
            </a>
        </li>
                <li>
            <a href="#">Form Elements</a>
            <ul class="breadcrumb-sub-nav">
                                <li>
                    <a href="form-elements-input-fields.php">Input Fields</a>
                </li>
                                <li>
                    <a href="form-elements-masked-input-fields.php">Masked Input Fields</a>
                </li>
                                <li>
                    <a href="form-elements-autotabs.php">Autotabs</a>
                </li>
                                <li>
                    <a href="form-elements-text-areas.php">Text Areas</a>
                </li>
                                <li>
                    <a href="form-elements-select-menus.php">Select Menus</a>
                </li>
                                <li>
                    <a href="form-elements-other-form-elements.php">Other Form Elements</a>
                </li>
                                <li>
                    <a href="form-elements-form-validation.php">Form Validation</a>
                </li>
                                <li>
                    <a href="form-elements-ui-elements.php">UI Elements</a>
                </li>
                            </ul>
        </li>
                <li class="current">
            <a href="javascript:;">Other Form Elements</a>
        </li>
    </ul>
</div>            <header>
                <i class="icon-big-notepad"></i>
                <h2><small>Other Form Elements</small></h2>
                <h3><small>Checkboxes, Radio Buttons, Buttons and other form controls.</small></h3>
            </header>
            <form class="form-horizontal" />
                <div class="container-fluid">

                        <div class="form-legend" id="Checkboxes">Checkboxes</div>

                        <!--Checkboxes begin-->
                        <div class="control-group row-fluid">
                            <div class="span12">
                                <label class="checkbox">
                                    <input type="checkbox" class="uniformCheckbox" value="checkbox1" />
                                    Option 1
                                </label>
                                <label class="checkbox">
                                    <input checked="checked" type="checkbox" class="uniformCheckbox" value="checkbox2" />
                                    Option 2
                                </label>
                                <label class="checkbox">
                                    <input disabled="disabled" type="checkbox" class="uniformCheckbox" value="checkbox3" />                                
                                    Option 3 (Disabled)
                                </label>
                                <label class="checkbox">
                                    <input checked="checked" disabled="disabled" type="checkbox" class="uniformCheckbox" value="checkbox4" />
                                    Option 4 (Disabled & Checked)
                                </label>
                            </div>
                        </div>
                        <!--Checkboxes end-->

                    <script>
                        $().ready(function(){
                            $(".uniformCheckbox").uniform();
                        });            
                    </script>
                </div><!-- end container -->

                <div id="Radio_Buttons" class="container-fluid">

                        <div class="form-legend">Radio Buttons</div>

                        <!--Radio Buttons begin-->
                        <div class="control-group row-fluid">
                            <div class="span12 centered">
                                <label class="radio">
                                    <input type="radio" name="optionsRadios" class="uniformRadio" value="radio1" />
                                    Option 1
                                </label>
                                <label class="radio">
                                    <input checked="checked" type="radio" name="optionsRadios" class="uniformRadio" value="radio2" />
                                    Option 2
                                </label>
                                <label class="radio">
                                    <input disabled="disabled" type="radio" name="optionsRadios" class="uniformRadio" value="radio3" />                                
                                    Option 3 (Disabled)
                                </label>
                                <label class="radio">
                                    <input checked="checked" disabled="disabled" type="radio" name="optionsRadiosDis" class="uniformRadio" value="radio4" />
                                    Option 4 (Disabled & Checked)
                                </label>
                            </div>
                        </div>
                        <!--Radio Buttons end-->

                    <script>
                        $().ready(function(){
                            $(".uniformRadio").uniform({
                                radioClass: 'uniformRadio'
                            });
                            
                        });            
                    </script>
                </div><!-- end container -->

                <div class="container-fluid">

                        <div class="form-legend" id="Buttons">Buttons</div>

                        <!--Buttons begin-->
                        <div class="control-group row-fluid">
                            <div class="span12 span-inset">
                                <button type="button" class="btn btn-large ">Default</button>
                                <button type="button" class="btn btn-large btn-primary">Primary</button>
                                <button type="button" class="btn btn-large btn-info">Info</button>
                                <button type="button" class="btn btn-large btn-success">Success</button>
                                <button type="button" class="btn btn-large btn-warning">Warning</button>
                                <button type="button" class="btn btn-large btn-danger">Danger</button>
                                <button type="button" class="btn btn-large btn-inverse">Inverse</button>
                            </div>
                        </div>
                        <div class="control-group row-fluid">
                            <div class="span12 span-inset">
                                <button type="button" class="btn">Default</button>
                                <button type="button" class="btn btn-primary">Primary</button>
                                <button type="button" class="btn btn-info">Info</button>
                                <button type="button" class="btn btn-success">Success</button>
                                <button type="button" class="btn btn-warning">Warning</button>
                                <button type="button" class="btn btn-danger">Danger</button>
                                <button type="button" class="btn btn-inverse">Inverse</button>
                            </div>
                        </div>
                        <div class="control-group row-fluid">
                            <div class="span12 span-inset">
                                <button type="button" class="btn btn-mini ">Default</button>
                                <button type="button" class="btn btn-mini btn-primary">Primary</button>
                                <button type="button" class="btn btn-mini btn-info">Info</button>
                                <button type="button" class="btn btn-mini btn-success">Success</button>
                                <button type="button" class="btn btn-mini btn-warning">Warning</button>
                                <button type="button" class="btn btn-mini btn-danger">Danger</button>
                                <button type="button" class="btn btn-mini btn-inverse">Inverse</button>
                            </div>
                        </div>
                        <div class="control-group row-fluid">
                            <div class="span12 span-inset">
                                <button type="button" disabled="disabled" class="btn">Default</button>
                                <button type="button" disabled="disabled" class="btn btn-primary">Primary</button>
                                <button type="button" disabled="disabled" class="btn btn-info">Info</button>
                                <button type="button" disabled="disabled" class="btn btn-success">Success</button>
                                <button type="button" disabled="disabled" class="btn btn-warning">Warning</button>
                                <button type="button" disabled="disabled" class="btn btn-danger">Danger</button>
                                <button type="button" disabled="disabled" class="btn btn-inverse">Inverse</button>
                            </div>
                        </div>
                        <!--Buttons end-->

                </div><!-- end container -->

                <div class="container-fluid">

                        <div class="form-legend" id="Button_Dropdown_Menus">Button Dropdown Menus</div>

                        <!--Buttons begin-->
                        <div class="control-group row-fluid">
                            <div class="span12 span-inset">
                                <div class="btn-group">
                                    <button type="button" class="btn dropdown-toggle btn-large" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
                                    <ul class="dropdown-menu">
                                      <li><a href="javascript:;">First Menu Item</a></li>
                                      <li><a href="javascript:;">Second Menu Item</a></li>
                                      <li><a href="javascript:;">Third Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Separated Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Another Separated Menu Item</a></li>
                                    </ul>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn dropdown-toggle btn-large btn-primary" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
                                    <ul class="dropdown-menu">
                                      <li><a href="javascript:;">First Menu Item</a></li>
                                      <li><a href="javascript:;">Second Menu Item</a></li>
                                      <li><a href="javascript:;">Third Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Separated Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Another Separated Menu Item</a></li>
                                    </ul>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn dropdown-toggle btn-large btn-info" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
                                    <ul class="dropdown-menu">
                                      <li><a href="javascript:;">First Menu Item</a></li>
                                      <li><a href="javascript:;">Second Menu Item</a></li>
                                      <li><a href="javascript:;">Third Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Separated Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Another Separated Menu Item</a></li>
                                    </ul>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn dropdown-toggle btn-large btn-success" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
                                    <ul class="dropdown-menu">
                                      <li><a href="javascript:;">First Menu Item</a></li>
                                      <li><a href="javascript:;">Second Menu Item</a></li>
                                      <li><a href="javascript:;">Third Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Separated Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Another Separated Menu Item</a></li>
                                    </ul>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn dropdown-toggle btn-large btn-warning" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
                                    <ul class="dropdown-menu">
                                      <li><a href="javascript:;">First Menu Item</a></li>
                                      <li><a href="javascript:;">Second Menu Item</a></li>
                                      <li><a href="javascript:;">Third Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Separated Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Another Separated Menu Item</a></li>
                                    </ul>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn dropdown-toggle btn-large btn-danger" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
                                    <ul class="dropdown-menu">
                                      <li><a href="javascript:;">First Menu Item</a></li>
                                      <li><a href="javascript:;">Second Menu Item</a></li>
                                      <li><a href="javascript:;">Third Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Separated Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Another Separated Menu Item</a></li>
                                    </ul>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn dropdown-toggle btn-large btn-inverse" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
                                    <ul class="dropdown-menu">
                                      <li><a href="javascript:;">First Menu Item</a></li>
                                      <li><a href="javascript:;">Second Menu Item</a></li>
                                      <li><a href="javascript:;">Third Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Separated Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Another Separated Menu Item</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="control-group row-fluid">
                            <div class="span12 span-inset">
                                <div class="btn-group">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
                                    <ul class="dropdown-menu">
                                      <li><a href="javascript:;">First Menu Item</a></li>
                                      <li><a href="javascript:;">Second Menu Item</a></li>
                                      <li><a href="javascript:;">Third Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Separated Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Another Separated Menu Item</a></li>
                                    </ul>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn dropdown-toggle btn-primary" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
                                    <ul class="dropdown-menu">
                                      <li><a href="javascript:;">First Menu Item</a></li>
                                      <li><a href="javascript:;">Second Menu Item</a></li>
                                      <li><a href="javascript:;">Third Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Separated Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Another Separated Menu Item</a></li>
                                    </ul>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn dropdown-toggle btn-info" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
                                    <ul class="dropdown-menu">
                                      <li><a href="javascript:;">First Menu Item</a></li>
                                      <li><a href="javascript:;">Second Menu Item</a></li>
                                      <li><a href="javascript:;">Third Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Separated Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Another Separated Menu Item</a></li>
                                    </ul>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn dropdown-toggle btn-success" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
                                    <ul class="dropdown-menu">
                                      <li><a href="javascript:;">First Menu Item</a></li>
                                      <li><a href="javascript:;">Second Menu Item</a></li>
                                      <li><a href="javascript:;">Third Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Separated Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Another Separated Menu Item</a></li>
                                    </ul>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn dropdown-toggle btn-warning" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
                                    <ul class="dropdown-menu">
                                      <li><a href="javascript:;">First Menu Item</a></li>
                                      <li><a href="javascript:;">Second Menu Item</a></li>
                                      <li><a href="javascript:;">Third Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Separated Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Another Separated Menu Item</a></li>
                                    </ul>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn dropdown-toggle btn-danger" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
                                    <ul class="dropdown-menu">
                                      <li><a href="javascript:;">First Menu Item</a></li>
                                      <li><a href="javascript:;">Second Menu Item</a></li>
                                      <li><a href="javascript:;">Third Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Separated Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Another Separated Menu Item</a></li>
                                    </ul>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn dropdown-toggle btn-inverse" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
                                    <ul class="dropdown-menu">
                                      <li><a href="javascript:;">First Menu Item</a></li>
                                      <li><a href="javascript:;">Second Menu Item</a></li>
                                      <li><a href="javascript:;">Third Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Separated Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Another Separated Menu Item</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="control-group row-fluid">
                            <div class="span12 span-inset">
                                <div class="btn-group">
                                    <button type="button" class="btn dropdown-toggle btn-mini" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
                                    <ul class="dropdown-menu">
                                      <li><a href="javascript:;">First Menu Item</a></li>
                                      <li><a href="javascript:;">Second Menu Item</a></li>
                                      <li><a href="javascript:;">Third Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Separated Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Another Separated Menu Item</a></li>
                                    </ul>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn dropdown-toggle btn-mini btn-primary" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
                                    <ul class="dropdown-menu">
                                      <li><a href="javascript:;">First Menu Item</a></li>
                                      <li><a href="javascript:;">Second Menu Item</a></li>
                                      <li><a href="javascript:;">Third Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Separated Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Another Separated Menu Item</a></li>
                                    </ul>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn dropdown-toggle btn-mini btn-info" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
                                    <ul class="dropdown-menu">
                                      <li><a href="javascript:;">First Menu Item</a></li>
                                      <li><a href="javascript:;">Second Menu Item</a></li>
                                      <li><a href="javascript:;">Third Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Separated Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Another Separated Menu Item</a></li>
                                    </ul>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn dropdown-toggle btn-mini btn-success" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
                                    <ul class="dropdown-menu">
                                      <li><a href="javascript:;">First Menu Item</a></li>
                                      <li><a href="javascript:;">Second Menu Item</a></li>
                                      <li><a href="javascript:;">Third Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Separated Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Another Separated Menu Item</a></li>
                                    </ul>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn dropdown-toggle btn-mini btn-warning" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
                                    <ul class="dropdown-menu">
                                      <li><a href="javascript:;">First Menu Item</a></li>
                                      <li><a href="javascript:;">Second Menu Item</a></li>
                                      <li><a href="javascript:;">Third Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Separated Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Another Separated Menu Item</a></li>
                                    </ul>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn dropdown-toggle btn-mini btn-danger" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
                                    <ul class="dropdown-menu">
                                      <li><a href="javascript:;">First Menu Item</a></li>
                                      <li><a href="javascript:;">Second Menu Item</a></li>
                                      <li><a href="javascript:;">Third Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Separated Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Another Separated Menu Item</a></li>
                                    </ul>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn dropdown-toggle btn-mini btn-inverse" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
                                    <ul class="dropdown-menu">
                                      <li><a href="javascript:;">First Menu Item</a></li>
                                      <li><a href="javascript:;">Second Menu Item</a></li>
                                      <li><a href="javascript:;">Third Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Separated Menu Item</a></li>
                                      <li class="divider"></li>
                                      <li><a href="javascript:;">Another Separated Menu Item</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!--Buttons end-->

                </div><!-- end container -->

                <div id="Basic_Button_Groups" class="container-fluid">

                        <div class="form-legend">Basic Button Groups</div>

                        <!--Basic Button Groups begin-->
                        <div class="control-group row-fluid">
                          <div class="span12 span-inset">
                            <div class="btn-group">
                              <button type="button" class="btn">1</button>
                              <button type="button" class="btn">2</button>
                              <button type="button" class="btn">3</button>
                            </div>
                            <div class="btn-group">
                              <button type="button" class="btn btn-info">1</button>
                              <button type="button" class="btn btn-info">2</button>
                              <button type="button" class="btn btn-info">3</button>
                            </div>
                            <div class="btn-group">
                              <button type="button" class="btn btn-success">1</button>
                              <button type="button" class="btn btn-success">2</button>
                              <button type="button" class="btn btn-success">3</button>
                            </div>
                            <div class="btn-group">
                              <button type="button" class="btn btn-warning">1</button>
                              <button type="button" class="btn btn-warning">2</button>
                              <button type="button" class="btn btn-warning">3</button>
                            </div>
                            <div class="btn-group">
                              <button type="button" class="btn btn-danger">1</button>
                              <button type="button" class="btn btn-danger">2</button>
                              <button type="button" class="btn btn-danger">3</button>
                            </div>
                          </div>
                        </div>
                        <!--Basic Button Groups end-->

                </div><!-- end container -->

                <div id="Checkbox_Button_Groups" class="container-fluid">

                        <div class="form-legend">Checkbox Button Groups</div>

                        <!--Checkbox Button Groups begin-->

                        <div class="control-group row-fluid">
                          <div class="span12 span-inset">
                            <div class="btn-group" data-toggle="buttons-checkbox">
                              <button type="button" class="btn active">Option 1</button>
                              <button type="button" class="btn">Option 2</button>
                              <button type="button" class="btn">Option 3</button>
                            </div>
                            <div class="btn-group" data-toggle="buttons-checkbox">
                              <button type="button" class="btn btn-inverse active">Option 1</button>
                              <button type="button" class="btn btn-inverse">Option 2</button>
                              <button type="button" class="btn btn-inverse">Option 3</button>
                            </div>
                          </div>
                        </div>
                        <!--Checkbox Button Groups end-->

                </div><!-- end container -->

                <div id="Radio_Button_Groups" class="container-fluid">

                        <div class="form-legend">Radio Button Groups</div>

                        <!--Radio Button Groups begin-->

                        <div class="control-group row-fluid">
                          <div class="span12 span-inset">
                            <div class="btn-group" data-toggle="buttons-radio">
                              <button type="button" class="btn btn-danger active">Ready</button>
                              <button type="button" class="btn btn-warning">Set</button>
                              <button type="button" class="btn btn-success">Go</button>
                            </div>
                            <div class="btn-group" data-toggle="buttons-radio">
                              <button type="button" class="btn btn-success active">ON</button>
                              <button type="button" class="btn btn-danger">OFF</button>
                            </div>
                          </div>
                        </div>
                        <!--Radio Button Groups end-->

                </div><!-- end container -->

                <div class="container-fluid">

                        <div class="form-legend" id="Tags">Tags</div>

                        <!--Tags begin-->
                        <div class="control-group row-fluid">
                            <div class="span12 span-inset">
                                <input name="tags" id="tags" value="Photon,CMS,Admin,Panel" />
                            </div>
                        </div>
                        <!--Tags end-->

                    <script>
                        $().ready(function(){
                            $('#tags').tagsInput({
                                'width':'100%',
                                'placeholderColor' : '#fff'
                            });
                        });
                    </script>
                </div><!-- end container -->

                <div class="container-fluid">

                        <div class="form-legend" id="Star_Rating">Star Rating</div>

                        <!--Star Rating begin-->
                        <div class="control-group row-fluid">
                            <div class="span12 span-inset">
                                <input name="adv1" type="radio" class="star {split:3}" />
                                <input name="adv1" type="radio" class="star {split:3}" />
                                <input name="adv1" type="radio" class="star {split:3}" />
                                <input name="adv1" type="radio" class="star {split:3}" />
                                <input name="adv1" type="radio" class="star {split:3}" />
                                <input name="adv1" type="radio" class="star {split:3}" />
                                <input name="adv1" type="radio" class="star {split:3}" />
                                <input name="adv1" type="radio" class="star {split:3}" />
                                <input name="adv1" type="radio" class="star {split:3}" />
                                <input name="adv1" type="radio" class="star {split:3}" />
                                <input name="adv1" type="radio" class="star {split:3}" />
                                <input name="adv1" type="radio" class="star {split:3}" />
                                <input name="adv1" type="radio" class="star {split:3}" />
                                <input name="adv1" type="radio" class="star {split:3}" />
                                <input name="adv1" type="radio" class="star {split:3}" />
                            </div>
                        </div>
                        <!--Star Rating end-->

                    <script>
                        // bonds to all .star class radio input elements
                    </script>
                </div><!-- end container -->

                <div class="container-fluid bootspin">

                        <div class="form-legend" id="Spinners">Spinners</div>

                        <!--Spinners begin-->
                        <div class="control-group row-fluid">
                            <div class="span3">
                                <label class="control-label" for="spin1">
                                    Whole Number Step<a href="javascript:;" class="bootstrap-tooltip" data-placement="top" data-original-title="You can also use the up, down, pgup, pgdown keys to change the values."><i class="icon-photon info-circle"></i></a>
                                </label>
                            </div>
                            <div class="span9">
                                <div class="controls">
                                    <input class="spinner" id="spin1" type="number" min="1" max="30" step="1" value="5" />
                                </div>
                            </div>
                        </div>
                        <div class="control-group row-fluid">
                            <div class="span3">
                                <label class="control-label" for="spin2">
                                    Half Number Step<a href="javascript:;" class="bootstrap-tooltip" data-placement="top" data-original-title="You can also use the up, down, pgup, pgdown keys to change the values."><i class="icon-photon info-circle"></i></a>
                                </label>
                            </div>
                            <div class="span9">
                                <div class="controls">
                                    <input style="" class="spinner" id="spin2" type="number" min="1" max="30" step="0.5" value="4.5" /> 
                                </div>
                            </div>
                        </div>
                        <div class="control-group row-fluid">
                            <div class="span3">
                                <label class="control-label" for="spin3">
                                    Decimal Step<a href="javascript:;" class="bootstrap-tooltip" data-placement="top" data-original-title="You can also use the up, down, pgup, pgdown keys to change the values."><i class="icon-photon info-circle"></i></a>
                                </label>
                            </div>
                            <div class="span9">
                                <div class="controls">
                                    <input style="" class="spinner" id="spin3" type="number" min="1" max="30" step="0.01" value="4.49" /> 
                                </div>
                            </div>
                        </div>
                        <!--Spinners end-->

                    <script>
                        $('.spinner').spinner({
                            min: 0,
                            max: 10000
                        });
                    </script>
                </div><!-- end container -->


                <div class="container-fluid">

                        <div class="form-legend" id="Color_Picker">Color Picker</div>

                        <!--Color Picker begin-->
                        <div class="control-group row-fluid">
                            <div class="span3">
                                <label class="control-label" for="color">Hex Input Field</label>
                            </div>
                            <div class="span9">
                                <div class="controls">
                                    <input type="text" id="color" name="color" value="#FFF8BE" />
                                    
                                    <div id="colorpicker"></div>
                                
                                </div>
                            </div>
                        </div>
                        <!--Color Picker end-->

                    <script>
                        $().ready(function(){
                            $('#colorpicker').farbtastic('#color');
                        });
                    </script> 
                </div><!-- end container -->


                <div class="container-fluid">

                        <div class="form-legend">Date & Time Pickers</div>

                        <!--Date & Time Pickers begin-->
                        <div id="Inline_Date_Picker" class="control-group row-fluid">
                            <div class="span3">
                                <label class="control-label">Inline Date Picker</label>
                            </div>
                            <div class="span9">
                                <div class="controls">
                                    <div id="datepickerInline"></div>
                                </div>
                            </div>
                        </div>
                        <div id="Date_Picker" class="control-group row-fluid">
                            <div class="span3">
                                <label class="control-label" for="datepicker">
                                    Date Picker<a href="javascript:;" class="bootstrap-tooltip" data-placement="top" data-original-title="Click to choose date."><i class="icon-photon info-circle"></i></a>
                                </label>
                            </div>
                            <div class="span9">
                                <div class="controls">
                                    <input type="text" id="datepicker" class="span3" />
                                </div>
                            </div>
                        </div>
                        <div id="Multiple_Months_Date_Picker" class="control-group row-fluid">
                            <div class="span3">
                                <label class="control-label" for="datepickerMulti">
                                    Multiple Months Date Picker<a href="javascript:;" class="bootstrap-tooltip" data-placement="top" data-original-title="Click to choose date."><i class="icon-photon info-circle"></i></a>
                                </label>
                            </div>
                            <div class="span9">
                                <div class="controls">
                                    <input type="text" id="datepickerMulti" class="span3" />
                                </div>
                            </div>
                        </div>
                        <div id="Time_Picker" class="control-group row-fluid">
                            <div class="span3">
                                <label class="control-label" for="timeEntry">
                                    Time Picker<a href="javascript:;" class="bootstrap-tooltip" data-placement="top" data-original-title="Enter time."><i class="icon-photon info-circle"></i></a>
                                </label>
                            </div>
                            <div class="span9">
                                <div class="controls">
                                    <input type="text" id="timeEntry" class="span3" />
                                </div>
                            </div>
                        </div>
                        <!--Date & Time Pickers end-->

                    <script>
                        $(function(){
                            $("#datepicker").datepicker();
                            $("#datepickerInline").datepicker();
                            $("#datepickerMulti").datepicker({
                                numberOfMonths: 3,
                                showButtonPanel: true
                            });
                            $('#timeEntry').timeEntry().change();
                        });
                    </script>
                </div><!-- end container -->
            </form>
        </div>
    <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-1936460-27']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
    </body>
</html>